<template>
    <BasicDrawer
      v-bind="$attrs"
      :title="getTitle"
      @register="acceptedDrawer"
      width="50%"
      showFooter
      :showOkBtn="false"
    >
      <!-- 受理表单 -->
      <BasicForm @register="registerForm" @submit="handleSubmit" v-if="showAccepteForm" />
      <Divider v-if="showAccepteForm"/>

      <!-- 处理结果表单 -->
      <BasicForm @register="resultForm" @submit="handleResultSubmit" v-if="showResultForm" />
      <Divider v-if="showResultForm"/>

      <!-- 工单关闭 -->
      <BasicForm  @register="closeForm" @submit="handleCloseSubmit" v-if="showCloseForm" />


        <!-- 标题初始化 -->
        <Description @register="registerBase" class="mt-4" />

        <!-- 描述 -->
        <Descriptions title="" bordered>
            <DescriptionsItem label="描述" bordered>
                <div v-html="baseInfo.description" style="width: 100%; max-width: 100%; overflow: auto; border: 1px solid #ccc; padding: 10px;"></div>
            </DescriptionsItem>
        </Descriptions>

        <!-- 初始化详情内容 -->
        <Description @register="registerDisposeDescrip" class="mt-4" v-if="showAccepteDescipt" />

        <!-- 处理结果详情内容 -->
        <Description @register="registerResultDescript" class="mt-4" v-if="showResultDescipt" />
        <!-- 工单关闭详情内容 -->
        <Description @register="registerCloseDescript" class="mt-4" v-if="showCloseDescipt" />  

    </BasicDrawer>
  </template>


  <script setup lang="ts">
    import { ref } from 'vue';
    import { Divider,Descriptions,DescriptionsItem,Collapse } from 'ant-design-vue';
    import { Description, useDescription } from '@/components/Description';
    import { detailSchema, resultFormSchema, detailDisposeSchema,
      closeFormSchema, baseFormSchema,detailResultSchema,detailCloseSchema  } from './data';
    import { BasicForm, useForm, FormSchema } from '@/components/Form';
    import { DescItemSizeEnum } from '@/enums';
    import { DescItem } from '@/components/Description';
    import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
    import { getOpFaultProcessApi } from '@/api/operations/faultprocess.api';
    import { disposeOpFaultProcessApi, disposeResultOpFaultProcessApi, disposeCloseOpFaultProcessApi } from '@/api/operations/faultprocess.api';
    import { useMessage } from '@/hooks/web/useMessage';

    import { h } from 'vue';
    import { Tinymce } from '@/components/Tinymce';

    const { createMessage, createConfirm } = useMessage();

    // 基本信息
    const baseInfo = ref({});
    // 工单受理信息
    const disposeInfo = ref({});
    // 工单处理结果信息
    const resultInfo = ref({});
    // 工单关闭信息
    const closeInfo = ref({});

    const showAccepteForm = ref(false);
    const showResultForm = ref(false);
    const showCloseForm = ref(false);
    
    const showAccepteDescipt = ref(false);
    const showResultDescipt = ref(false);
    const showCloseDescipt = ref(false);


    /** 标题初始化 */
    const getTitle = ref('工单受理');

    const [registerBase, { setBaseDescProps }] = useDescription({
        title: '工单流程详情',
        schema: detailSchema,
        column: DescItemSizeEnum.DEFAULT,
        data: baseInfo,
    });

    const [registerDisposeDescrip, { setDisposeDescProps }] = useDescription({
        title: '工单受理详情',
        schema: detailDisposeSchema,
        column: DescItemSizeEnum.DEFAULT,
        data: disposeInfo,
    });

    const [registerResultDescript, { setResultDescProps }] = useDescription({
        title: '工单处理结果详情',
        schema: detailResultSchema,
        column: DescItemSizeEnum.DEFAULT,
        data: resultInfo,
    });

    const [registerCloseDescript, { setCloseDescProps }] = useDescription({
        title: '工单关闭详情',
        schema: detailCloseSchema,
        column: DescItemSizeEnum.DEFAULT,
        data: closeInfo,
    });
    
    
    /** 注册表单 */ 
    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
      labelWidth: 120,
      schemas: baseFormSchema,
      showSubmitButton:true,
      submitButtonOptions:{
        text:'提交',
      },
    });

    /** 注册结果表单 */
    const [resultForm, { resetResultFields, setResultFieldsValue, validateResult }] = useForm({
      labelWidth: 120,
      schemas: resultFormSchema,
      showSubmitButton:true,
      submitButtonOptions:{
        text:'提交',
      },
    });

    const [closeForm, { resetCloseFields, setCloseFieldsValue, validateClose }] = useForm({
      labelWidth: 120,
      schemas: closeFormSchema,
      showSubmitButton:true,
      submitButtonOptions:{
        text:'提交',
      },
    });


    function handleSubmit(values: any){
      values.processId = baseInfo.value.id;
      disposeOpFaultProcessApi(values).then(() => {
          closeDrawer();
          createMessage.success('受理成功');
      })
    }

    function handleResultSubmit(values: any){
      console.log(values)
      values.processId = baseInfo.value.id;

      if(values.resolutionResult != undefined && values.resolutionResult != ''){
        values.resolutionResult = values.resolutionResult.replaceAll("\"","'")
      }

      disposeResultOpFaultProcessApi(values).then(() => {
          closeDrawer();
          createMessage.success('处理完成');
      })
    }

    function handleCloseSubmit(values: any){
      console.log(values)
      values.processId = baseInfo.value.id;

      if(values.content!= undefined && values.content!= ''){
        values.content = values.content.replaceAll("\"","'")
      }

      disposeCloseOpFaultProcessApi(values).then(() => {
          closeDrawer();
          createMessage.success('处理完成');
      })
    }

    const [acceptedDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
      setDrawerProps({ loading: true, confirmLoading: false });
      baseInfo.value = await getOpFaultProcessApi(data.record.id);

      disposeInfo.value = baseInfo.value.opFaultAcceptanceDto;
      resultInfo.value = baseInfo.value.opFaultResultDto;
      closeInfo.value = baseInfo.value.opFaultCloseDto;
     
      // 控制显示的详情内容
      if(baseInfo.value.opFaultAcceptanceDto!= undefined){
        showAccepteDescipt.value = true;
      }
      if(baseInfo.value.opFaultResultDto!= undefined){
        
        showResultDescipt.value = true;
      }
      if(baseInfo.value.opFaultCloseDto != undefined){
        showCloseDescipt.value = true;
      }
  

      getTitle.value = '工单详情:' + baseInfo.value.title;

      if(baseInfo.value.faultProcessStatus == '待受理'){
        showAccepteForm.value = true;
        showResultForm.value = false;
        showCloseForm.value = false;
        getTitle.value = '工单受理:' + baseInfo.value.title;
      }

      if(baseInfo.value.faultProcessStatus == '处理中'){
        showAccepteForm.value = false;
        showResultForm.value = true;
        showCloseForm.value = false;
        getTitle.value = '工单处理:' + baseInfo.value.title;
      }

      if(baseInfo.value.faultProcessStatus == '待结束'){
        showAccepteForm.value = false;
        showResultForm.value = false;
        showCloseForm.value = true;
        getTitle.value = '工单关闭:' + baseInfo.value.title;
      }

      setDrawerProps({ loading: false });
    });

  </script>
